<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import { chartConfig } from '@/config/chart.config'

export default {
  name: 'WeatherStatsChart',
  props: {
    data: {
      type: Array,
      required: true
    },
    city: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$refs.chartContainer)
      this.updateChart()
    },
    updateChart() {
      if (!this.data.length || !this.chart) return

      const dates = this.data.map(item => {
        const date = new Date(item.dataDate)
        return `${date.getMonth() + 1}月${date.getDate()}日`
      })
      
      const option = {
        title: {
          text: '降水量与风速统计',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#eee',
          borderWidth: 1,
          padding: [10, 15],
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          formatter: function(params) {
            let result = `<div style="font-weight: bold; margin-bottom: 5px;">${params[0].axisValue}</div>`
            params.forEach(item => {
              let value = item.seriesName === '降水量' 
                ? `${item.value} mm`
                : `${item.value} m/s`
              result += `<div style="display: flex; justify-content: space-between; margin: 3px 0;">
                <span style="margin-right: 15px;">
                  <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 5px;"></span>
                  ${item.seriesName}
                </span>
                <span style="font-weight: bold;">${value}</span>
              </div>`
            })
            return result
          }
        },
        legend: {
          data: ['降水量', '最大风速'],
          bottom: 20,
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 14
          }
        },
        grid: chartConfig.grid.default,
        xAxis: {
          type: 'category',
          data: dates,
          axisLabel: {
            rotate: 30,
            fontSize: 12,
            margin: 15
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '降水量(mm)',
            position: 'left',
            axisLabel: {
              formatter: '{value} mm',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#eee'
              }
            }
          },
          {
            type: 'value',
            name: '风速(m/s)',
            position: 'right',
            axisLabel: {
              formatter: '{value} m/s',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '降水量',
            type: 'bar',
            data: this.data.map(item => item.totalPrecipitation),
            itemStyle: {
              color: chartConfig.colors.weather.precipitation,
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c} mm',
              fontSize: 12,
              color: chartConfig.colors.weather.precipitation
            },
            emphasis: {
              itemStyle: {
                color: chartConfig.colors.weather.precipitation,
                opacity: 0.8
              }
            },
            barWidth: '40%'
          },
          {
            name: '最大风速',
            type: 'line',
            yAxisIndex: 1,
            data: this.data.map(item => item.maxWindSpeed),
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: chartConfig.colors.weather.maxWind,
              borderWidth: 2,
              borderColor: '#fff'
            },
            emphasis: {
              scale: true,
              symbolSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(230, 162, 60, 0.3)'
              }
            },
            lineStyle: {
              width: 3
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c} m/s',
              fontSize: 12,
              color: chartConfig.colors.weather.maxWind,
              padding: [0, 0, 5, 0],
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              borderRadius: 4,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 5
            }
          }
        ]
      }

      this.chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.$nextTick(() => {
            this.updateChart()
          })
        }
      },
      deep: true
    },
    city: {
      handler: 'updateChart',
      immediate: true
    }
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 